<template>
  <div>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="140px">
      <!-- <el-form-item label="试卷名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item> -->
      <el-form-item label="试卷类型" prop="sort">
        <el-radio-group v-model="form.sort">
          <el-radio-button label="公考行测">公考行测</el-radio-button>
          <el-radio-button label="事业编职测">事业编职测</el-radio-button>
          <el-radio-button label="公共基础">公共基础</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="省份" prop="province">
        <div class="province-checkbox-group">
          <el-checkbox v-for="(item, index) in provienceOptions" :key="item" v-model="form.province" :label="item"
            style="width: 16.66%; margin-right: 0; margin-bottom: 10px">
            {{ item }}
          </el-checkbox>
        </div>
      </el-form-item>
      <!-- <el-form-item label="年份" prop="years">
        <el-input v-model="form.years" type="number" />
      </el-form-item> -->
      <el-form-item label="难度系数" prop="difficultyLevel">
        <el-input v-model="form.difficultyLevel" placeholder="请输入难度系数" />
      </el-form-item>
      <el-form-item label="URL" prop="url">
        <el-input v-model="form.url" />
      </el-form-item>
      <el-form-item label="登录凭证Cookie" prop="cookie">
        <el-input v-model="form.cookie" />
      </el-form-item>
    </el-form>
  </div>
  <div style="flex: auto">
    <el-button type="primary" :loading="loading" @click="confirmClick">确定</el-button>
    <!-- <el-button type="primary" @click="confirmClickBat">批量导入</el-button> -->
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { fetchPaper } from '../api/index';
const formRef = ref();
const loading = ref(false);
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
import { fenbie } from './config'

let defalutProvicexc = [
  '国考',
  '国考模拟卷',
  '省考模拟卷',
  '选调生',
  '安徽',
  '北京',
  '重庆',
  '福建',
  '甘肃',
  '广东',
  '广西',
  '贵州',
  '海南',
  '河北',
  '河南',
  '黑龙江',
  '湖北',
  '湖南',
  '吉林',
  '江苏',
  '江西',
  '辽宁',
  '内蒙古',
  '宁夏',
  '青海',
  '山东',
  '山西',
  '陕西',
  '上海',
  '四川',
  '天津',
  '西藏',
  '新疆',
  '云南',
  '浙江'
];
const provienceOptions = ref(defalutProvicexc);
// 单验证规则
const rules = {
  name: [{ required: true, message: '请输入试卷名称', trigger: 'blur' }],
  province: [{ required: true, message: '请输入省份', trigger: 'blur' }],
  years: [{ required: true, message: '请输入年份', trigger: 'blur' }],
  sort: [{ required: true, message: '请选择试卷类型', trigger: 'change' }],
  url: [{ required: true, message: '请收入链接', trigger: 'change' }],
  cookie: [{ required: true, message: '请输入登录凭证', trigger: 'change' }]
};
// 表单数据
const form = reactive({
  name: '',
  province: [] as string[],
  years: new Date().getFullYear().toString(),
  sort: '公考行测',
  id: undefined as number | undefined,
  difficultyLevel: '',
  url: '',
  cookie: ''
});
const confirmClick = () => {
  formRef.value.validate(valid => {
    if (valid) {
      console.log(form);
      const submitForm = { ...form };
      submitForm.province = submitForm.province.join(',');
      loading.value = true;
      fetchPaper(submitForm).then(res => {
        console.log(res);
        if (res.code === 200) {
          ElMessage.success('添加成功');
          loading.value = false;
        } else {
          ElMessage.error(res.msg);
          loading.value = false;
        }

      }).catch(() => {
        ElMessage.error('添加失败');
        loading.value = false;
      });
    }
  });
};
const confirmClickBat = () => {
  fenbie.forEach(item => {
    fetchPaper(item).then(res => {
      if (res.code === 200) {
        ElMessage.success('添加成功');
        loading.value = false;
      } else {
        ElMessage.error(res.msg);
        loading.value = false;
      }
    }).catch(() => {
      ElMessage.error('添加失败');
      loading.value = false;
    });
  })
}

</script>

<style lang="scss" scoped></style>
